<template>
  <view class="modal-body">
    <view class="avatar-wrapper">
      <image class="avatar-img" :src="avatarUrl || defaultAvatar" mode="aspectFill"></image>
    </view>
    <view class="leader-name">
      {{nickName}}
    </view>
    <view class="welcome-word">
      {{welcome}}
    </view>
    <view class="welcome-tips">
      {{welcomeTip}}
    </view>
    <button @getuserinfo="toLogin" open-type="getUserInfo" class="tui-info" type="warn">
      {{btnTxt}}
    </button>
  </view>
</template>

<script>
import config from "@/config";
export default {
  name: "t-proxy-bind",
  props: {
    nickName: String,
    type: String,
    avatarUrl: String,
  },
  computed: {
    welcome() {
      return {
        c: "Hi, 欢迎来到我的商城, 立即开始浏览商品吧~!",
        d: "欢迎来到我的商城, 请立即登录成为代理吧.",
        r: `欢迎加入${config.mallName}商城.`,
      }[this.type];
    },
    welcomeTip() {
      return {
        c: "授权登录才可以享受我给你带来的优惠哦~!",
        d: "授权绑定后才能成为商城的代理哦~!",
        r: "授权绑定后才能成为商城的代理",
      }[this.type];
    },
    btnTxt() {
      return this.type === "c" ? "立即登录" : "立即绑定";
    },
  },
  data() {
    return {
      defaultAvatar:
        "https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/welcome.png",
    };
  },
  methods: {
    // 用户登录
    toLogin() {
      this.$store.dispatch("USER_LOGIN", {
        callBack: (userInfo) => {
          this.$emit("onLogin", this.type, userInfo);
        },
      });
    },
  },
};
</script>

<style lang="scss">
.modal-body {
  .avatar-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    .avatar-img {
      width: 140rpx;
      height: 140rpx;
      border-radius: 10rpx;
    }
  }
  .leader-name {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    text-align: center;
    padding-top: 28rpx;
  }
  .welcome-word {
    text-align: center;
    padding-top: 28rpx;
  }
  .welcome-tips {
    color: #b1b1b1;
    font-size: 24rpx;
    text-align: center;
    padding-top: 10rpx;
  }
  .tui-info {
    padding: 20rpx;
    margin-top: 20rpx;
  }
}
</style>
